<template>
  <div class="foot">
    <router-link :to="'/qds/homepage'">
      <div class="foot_content" v-on:click="changePage(0)" v-bind:class="{active:(type ==0)}">
        <i class="fa fa-star-half-o fa-lg"></i>
        <p>首页</p>
      </div>
    </router-link>
    <router-link :to="'/qds/mall'">
      <div class="foot_content" v-on:click="changePage(1)"  v-bind:class="{active:(type == 1)}">
        <i class="fa fa-support fa-lg"></i>
        <p>商城</p>
      </div>
    </router-link>
    <router-link :to="'/qds/waterbilllist'" v-on:click="changePage(2)">
      <div class="foot_content" v-on:click="changePage(2)" v-bind:class="{active:(type == 2)}">
        <i class="fa fa-tint fa-lg"></i>
        <p>水票</p>
      </div>
    </router-link>
    <router-link :to="'/qds/orderList'" v-on:click="changePage(4)">
      <div class="foot_content" v-on:click="changePage(4)" v-bind:class="{active:(type == 4)}">
        <i class="fa fa-check-square-o fa-lg"></i>
        <p>订单</p>
      </div>
    </router-link>
    <router-link :to="'/qds/personall'">
      <div class="foot_content" v-on:click="changePage(3)" v-bind:class="{active:(type ==3)}">
        <i class="fa fa-user-circle fa-lg"></i>
        <p>我的</p>
      </div>
    </router-link>
  </div>
</template>

<script>
    export default {
        name: "foot",
      props:['type'],
      methods:{
        changePage:function (a) {
          this.$emit('type', a);
          /*this.type = a*/
        }
      }
    }
</script>

<style scoped>
  a{
    color: #2c3e50!important;
  }
  .foot{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    border-top: 1px solid #f1f1f1;
    /*padding: 0.5rem 0;*/
    background: #fff;
  }
  .active{
    color: #1296db!important;
  }
  .foot{
    font-size: 14px;
  }
  .foot_content{
    padding: 0.5rem;
    color: #656262;
  }
  .foot_content p{
/*    padding-top: 0.4rem;*/
    font-size: 0.8rem;
  }

  .fa-lg{
    font-size: 1rem;
  }
</style>
